<template>
    <div class = "theme-box">
<!--        <i @click = "showThemeOption()" class="fa fa-steam" aria-hidden="true"></i>-->
        <div class = "arrows-box" @click = "showThemeOption()">
            <i :class="rotateStyle"  class="fa fa-chevron-down" aria-hidden="true"></i>
        </div>
        <div class = "theme-div" :style="{height:themeOptionShow+'px'}">
            <ul class = "theme-ul">
                <li v-for="(theme,i) in themes" @click = "currentTheme = i">
                    <i v-if = "currentTheme === i" class="fa fa-check" aria-hidden="true"></i>
                    <i v-else></i>
                    <div :style="theme.styleStr"></div>
                    <span>{{theme.name}}</span>
                </li>
            </ul>
        </div>


    </div>
</template>
<script setup>

import {reactive, ref, watch} from "vue";
let themes = reactive([
    {
        name:'活力渐变',
        styleStr:
            {
                // background: "rgb(2,0,36)";
                background: "linear-gradient(153deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)",
                color: '#D9E6FD',
            }
    },
    {
        name:'忧郁蓝渐变',
        styleStr:
            {
                // background: "rgb(2,0,36)";
                background: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)",
                color: '#D9E6FD',
            }
    },
    {
        name:'红渐变',
        styleStr:
            {
                background: 'linear-gradient(176deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)',
                color: '#D9E6FD',
            }
    },    {
        name:'粉渐变',
        styleStr:
            {
                background: 'linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%)',
                color: '#fff',
            }
    },

    {
        name:'天际蓝',
        styleStr:
            {
                background: '#0076F6',
                color: '#D9E6FD',
            }
    },
    {
        name:'告警红',
        styleStr:
            {
                background: '#C62F2F',
                color: '#D9E6FD',
            }
    },
    {
        name:'猛男粉',
        styleStr:
            {
                background: '#F89DC2',
                color: '#D9E6FD',
            }
    },
    {
        name:'轨行区的黑',
        styleStr:
            {
                background: '#2B2B2B',
                color: '#D9E6FD',
            }
    },
    {
        name:'青青草原',
        styleStr:
            {
                background: '#46C07C',
                color: '#D9E6FD',
            }
    },
    {
        name:'土豪金',
        styleStr:
            {
                background: 'linear-gradient(270deg, rgba(255,93,46,1) 0%, rgba(255,174,0,1) 69%)',
                color: '#D9E6FD',
            }
    },
]);
let rotateStyle = ref("deg0");

let themeOptionShow = ref(0);

function showThemeOption(){
    if(themeOptionShow.value === 400){
        themeOptionShow.value = 0;
        rotateStyle.value = "deg180";
    }
    else{
        themeOptionShow.value = 400;
        rotateStyle.value = "deg0";
    }
}



let currentTheme = ref(getThemeIndex());
watch(currentTheme,(newValue)=>{
    localStorage.setItem("themeIndex",newValue);
    document.documentElement.style.setProperty("--theme-background-color",themes[newValue].styleStr.background);
    document.documentElement.style.setProperty("--theme-font-color",themes[newValue].styleStr.color);
},{immediate:true});

function getThemeIndex(){
    if(localStorage.getItem("themeIndex")){
        return localStorage.getItem("themeIndex");
    }else {
        return 3;
    }
}


</script >

<style scoped lang="scss">


.theme-box {
    -webkit-app-region: no-drag;
    position: relative;
    .theme-div{
        position: absolute;
        overflow: hidden;
        transition: 0.3s;
        width: 150px;
        top: 40px;
        left: 0;
        z-index: 500;
        //box-shadow:0px 5px 5px rgba(0, 0, 0, 0.2);
        //background: #fff;
    }
    .theme-ul {
        margin-top: 10px;
        position: relative;
        background: #f9f6FD;
        padding: 10px 0;
        //box-shadow:0px 5px 5px rgba(0, 0, 0, 0.2);
        border: 1px #ddd solid;
        //border-top: none;
        li{
            padding: 0 5px;
            display: flex;
            align-items: center;
            i{
                display: inline-block;
                font-size: 12px;
                width: 12px;
                color: #333;
            }
            span{
                color: #333;
                display: inline-block;
                width:100px;
                cursor: pointer;
            }
            div{
                margin: 0 5px;
                display: inline-block;
                width: 12px;
                height: 12px;
            }
        }
        li:hover{
            background: #d9d6d8;
        }
    }
    .deg0{
        transform: rotate(0deg);
        transition: transform 0.2s;
    }
    .deg180{
        transform: rotate(180deg);
        transition: transform 0.2s;
    }
    .theme-ul:before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        top: -11px;
        left: 10px;
        border-right: solid 10px transparent;
        border-left: solid 10px transparent;
        border-bottom: solid 10px #f9f6FD;
    }
    .arrows-box{
        width: 40px;
        //height: 30px;
        height: 35px;
        line-height:43px;

        cursor: pointer;
        border-radius: 3px;
        text-align: center;
        &>i {
            font-size: 20px;
        }
    }
    .arrows-box:hover {
        background: rgba(255, 255, 255, 0.2);
        transition: 0.3s;
    }

}

</style>
